<template>
    <div class="beginmb">
        <div class="item" @click="beginclick(item)" v-for="item in list">
            <div class="img">
                <img src="../assets/cdn.png" v-if="item.name == '此电脑'" alt="">
                <img src="../assets/bl.png" v-if="item.name == 'bilibili'" alt="">
                <img src="../assets/gg.png" v-if="item.name == '谷歌'" alt=""></img>
            </div>
            <div class="name">{{ item.name }}</div>
        </div>
    </div>
</template>
<script setup>
import { require } from "../assets/require"
import { ref, defineEmits } from 'vue';

const inputData = ref('');

const emit = defineEmits(['sendData']);
const list = [{
    img: require("../assets/cdn.png"),
    name: "此电脑"
},
{
    img: require("../assets/bl.png"),
    name: "bilibili"
}, {
    img: require("../assets/gg.png"),
    name: "谷歌"
}]
const beginclick = (item) => {
    emit('sendData', item);
}
</script>
<style scoped>
.beginmb {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* height: 100%; */
    overflow: auto;
}

.item {
    height: 72px;
    width: 76px;
    padding: 0px 10px;
    box-sizing: border-box;

    cursor: pointer;

}

.img {
    width: 100%;
    text-align: center;

}

.img img {
    width: 50px;
    height: 50px;
}

.name {
    text-align: center;
    font-size: 10px;
}

.item:hover {
    background: #fff;
}
</style>
